<!--
 * @FileDescription: 主页面 - 梯控 抽屉弹框
 * @Author: Ronghao Zhu
 * @CreateTime: 2020/09/07 星期一
 * @LastEditors: Ronghao Zhu
 * @LastEditTime: 2020/09/07
-->

<template>
  <div class="elevator-container">
    <el-row type="flex" justify="center" style="margin-bottom: 15px">
      <el-radio-group v-model="formInline.status" @change="getList(1)">
        <el-radio-button :label="2">触发</el-radio-button>
        <el-radio-button :label="3">已禁用</el-radio-button>
        <el-radio-button :label="4">正常</el-radio-button>
        <el-radio-button :label="5">离线</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row type="flex" justify="center">
      <el-form class="serach-form" :model="formInline" :inline="true" @submit.native.prevent @keyup.enter.native="getList(1)">
        <el-form-item class="form-item1">
          <el-input v-model="formInline.queryContent" clearable placeholder="搜索名称、单位、位置"></el-input>
        </el-form-item>

        <el-form-item class="form-item2">
          <el-button class="form-search-btn" type="primary" plain @click="getList(1)">搜索</el-button>
        </el-form-item>

        <el-form-item class="form-item3">
          <el-select v-model="formInline.orgIds" placeholder="请选择单位">
            <el-option
              v-for="(item,index) in orgList"
              :key="index"
              :label="item.shortName"
              :value="item.organizationId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- v-show="String(formInline.orgIds).split(',').length === 1" -->
        <el-form-item prop="fbsId" class="form-item4">
          <tree-select
            v-model="formInline.fbsId"
            placeholder="请选择场所"
            filterable
            :width="240"
            :data="buildList"
            :defaultProps="buildDefaultProps"
            :checkedKeys="defaultCheckedFbsId"
            :nodeKey="buildNodeKey"
          ></tree-select>
        </el-form-item>
      </el-form>
    </el-row>
    <app-list
      :formInline="formInline"
      :tableData="tableData"
      :getList="getList"
      :multipleHandle="multipleHandle"
      :operate="operate"
      v-loading="loading"
    ></app-list>
    <handle-form v-if="handleFormVisible" :hideEdit="hideEdit" :formInline="formInline"></handle-form>
  </div>
</template>

<script>
import AppList from "./ElevatorControllerList";
import HandleForm from "./ElevatorControllerHandleForm";
import TreeSelect from "@/libs/TreeSelect/Main";
import { getElevatorConList, updateElevatorCon } from "@/api/common";
import { getOrgList } from "@/api/org";
import { getFbsTree } from "@/api/fbs";

export default {
  name: "ElevatorController",
  components: {
    AppList,
    HandleForm,
    TreeSelect,
  },
  props: {
    formInline: {
      type: Object,
    },
    handleFormVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      tableData: {}, // 接口返回的数据
      loading: false, // 加载状态
      orgList: [
        {
          organizationId: this.$store.state.userinfo.organizationIds,
          shortName: "全部业主单位",
        },
      ], // 单位集合下拉框
      buildList: [],
      buildDefaultProps: {
        children: "nodes",
        label: "text",
        value: "id",
      },
      defaultCheckedFbsId: [],
      buildNodeKey: "id",
      submitObj: {
        dataType: 1,
        bizIds: "",
      }, // 保存接口提交的数据
    };
  },
  watch: {
    /* 监听选择单位 */
    "formInline.orgIds": {
      handler(newVal, oldVal) {
        if (
          newVal &&
          newVal !== oldVal &&
          String(newVal).split(",").length === 1
        ) {
          this.getFbsTree();
          this.getList(1);
          this.formInline.fbsId = "";
        } else {
          this.buildList = [];
          this.formInline.fbsId = "";
          this.defaultCheckedFbsId = [];
          this.getList(1);
        }
      },
      deep: true,
    },
    /* 监听选择场所 */
    "formInline.fbsId": {
      handler(newVal, oldVal) {
        if (!newVal) this.formInline.fbsId = "";
        if (newVal && newVal !== oldVal) this.getList(1);
      },
      deep: true,
    },
  },
  created() {
    this.getOrgList();
  },
  methods: {
    async getList(_pageIndex, _pageSize) {
      try {
        this.tableData={}
        this.loading = true;
        if (_pageIndex) this.formInline.pageIndex = _pageIndex - 1;
        if (_pageSize) this.formInline.pageSize = _pageSize;
        const res = await getElevatorConList(this.formInline);
        if (res.status === 200) {
          this.tableData = res;
          this.loading = false;
        } else {
          this.$message.error(res.info);
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /* 获取单位下拉框 */
    async getOrgList() {
      try {
        const res = await getOrgList({ queryType: 0 });
        if (res.status === 200) {
          this.orgList = res.data;
          this.orgList.unshift({
            organizationId: this.$store.state.userinfo.organizationIds,
            shortName: "全部业主单位",
          });
        } else {
          this.$message.error(res.info);
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /* 获取场所 */
    async getFbsTree() {
      try {
        const res = await getFbsTree({
          organizationId: this.formInline.orgIds,
        });
        if (res.status === 200) {
          this.buildList = res.data;
        } else {
          this.$message.error(res.info);
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /* 单个处理 */
    operate(val, tabIndex) {
      // console.log(val, tabIndex);
      this.$emit("showHandleForm", true);
      this.submitObj.bizIds = val.settingId;
    },
    /* 批量处理 */
    multipleHandle(val, tabIndex) {
      this.$emit("showHandleForm", true);
      // console.log(val, tabIndex);
      const arr = [];
      val.forEach((v) => {
        arr.push(v.settingId);
      });
      this.submitObj.bizIds = arr.toString();
      // console.log(this.submitObj);
    },
    hideEdit(row) {
      if (typeof row === "object") {
        this.submitObj = Object.assign({}, this.submitObj, row);
        // console.log(this.submitObj);
        // return;
        updateElevatorCon(this.submitObj).then((res) => {
          if (res.status === 200) {
            this.$message.success("保存成功！");
            this.getList(1);
          } else {
            this.$message.error(res.info);
          }
        });
      }
      this.$emit("hideHandleForm", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.elevator-container {
  position: relative;
  padding: 0 20px;
  height: 100%;
  .form-item1 {
    width: calc(100% - 85px);
    /deep/ .el-form-item__content {
      width: 100%;
    }
  }
  .form-item2 {
    margin-right: 0;
  }
  .form-item3 {
    width: calc(50% - 8px);
    /deep/ .el-form-item__content {
      width: 100%;
    }
  }
  .form-item4 {
    width: calc(50% - 8px);
    margin-right: 0;
    /deep/ .el-form-item__content {
      width: 100%;
    }
    /deep/ .tree-select {
      width: 100% !important;
    }
  }
}
</style>
